import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common

ColumnLayout {
  id: root
  anchors.fill: parent
  property var extra_data: ({ name: "", data: [] })
  property var effectList : []
  property var numberList : ["sv_atk", "sv_def", "sv_food"]
  property var numbers : [0, 0, 0]
  //signal finish()

  property var carriages : ["sv_main"]

  BigGlowText {
    id : title
    Layout.fillWidth: true
    height : 40

    text: Lua.tr(extra_data.name)
  }

  RowLayout{
    id : mainArea
    spacing: 15
    clip: true

    Rectangle {
      id: imageArea
      width : 320
      height : 320

      clip : true
      border.color: "#FEF7D6"
      border.width: 2
      radius : 5
      color: "#88EEEEEE"

      Item {
        id : mainBody
        anchors.right: parent.right
        anchors.rightMargin: 55
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20 + 30 * (4 - carriages.length)
        width: 180
        height : 40

        Image {
          objectName : "sv_chain"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: carriages.length == 1 ? 65 : 100
          anchors.right : mainBody.right
          anchors.rightMargin: -35
        }

        Image {
          objectName : "sv_hammer"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: carriages.length > 1 ? 60 : 40
          anchors.right : mainBody.right
          anchors.rightMargin: -35
        }

        Image {
          objectName : "sv_bagua"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: carriages.length == 4 ? 120 : carriages.length * 40
          anchors.right : mainBody.left
          anchors.rightMargin: -45
        }

        Repeater {
          model: carriages
          delegate: Rectangle {
            color: "transparent"
            width: 210
            height: 107
            anchors.bottom: mainBody.bottom
            anchors.bottomMargin: -8 + 40 * index
            anchors.right : mainBody.right
            anchors.rightMargin: 17
            z : index > 0 ? 1 : 0

            Image {
              anchors.centerIn: parent
              source: AppPath + "/packages/emopack/image/misc/" + modelData + ".png"
            }
          }
          
        }

        Image {
          objectName : "sv_horse"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.right : mainBody.left
          z : 1
        }

        Image {
          objectName : "sv_sheild"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: -40 + Math.min(carriages.length, 3) * 40
          anchors.right : mainBody.left
          z : 1
        }


        Image {
          objectName : "sv_gun"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.right : mainBody.right
          anchors.rightMargin: -35
        }


        Image {
          objectName : "sv_sail"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: 15 + 40 * carriages.length
          anchors.right : mainBody.right
          anchors.rightMargin: 95
          z : 1
        }

        Image {
          objectName : "sv_drum"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: 18 + 40 * carriages.length
          anchors.right : mainBody.right
          anchors.rightMargin: 55
          z : 1
        }

        Image {
          objectName : "sv_wing"
          visible : false
          source: AppPath + "/packages/emopack/image/misc/" + objectName + ".png"
          anchors.bottom: mainBody.bottom
          anchors.bottomMargin: 5 + 40 * carriages.length
          anchors.right : mainBody.right
          anchors.rightMargin: 70
          z : 1
        }

      }

    }

    Rectangle {
      id: effectArea
      width : 220
      height : 320

      clip : true
      border.color: "#FEF7D6"
      border.width: 2
      radius : 5
      color: "#88EEEEEE"

      ListView {
        width: parent.width - 10
        height: parent.height - 10
        anchors.centerIn: parent
        anchors.margins: 5
        clip: true

        model: effectList
        
        delegate: Text {
          property bool isTitle : (modelData.indexOf("Effect") !== -1)
          width: parent.width
          font.pixelSize: isTitle ? 18 : 16
          color: isTitle ? "#DDDDC4" : "#E4D5A0"
          text: isTitle ? '<b>' + Lua.tr(modelData) + "</b> (" + Lua.tr(":" + modelData) + ")"
          : '<b>' + Lua.tr(modelData) + "</b>: " + Lua.tr(":" + modelData)
          wrapMode: Text.Wrap
        }
        
      }

    }

  }

  RowLayout {
    id : numberArea
    spacing: 160
    clip: true
    height : 40

    Repeater{
      model: numberList

      delegate: ColumnLayout {
        property int num : numbers[index]
        spacing : -5

        GlowText {
          text: '<b>' + Lua.tr(modelData) + "</b>: " + num.toString()
          font.family: Config.libianName
          font.pixelSize: 34
          font.bold: true
          color: "#FEF7D6"
          glow.color: "#845422"
          glow.spread: 0.5
        }

        Text {
          font.pixelSize: 18
          color: "#CCCCBB"
          text: Lua.tr(":" + modelData)
        }

      }
    }
  }


  onExtra_dataChanged: {
    var list = [];
    var effects = ["sv_startEffect", "sv_damageEffect", "sv_activeEffect", "sv_stateEffect"];

    for (var i = 0; i < effects.length; i++) {
      var effect = effects[i];
      var ret = extra_data.data[effect];
      if (ret && ret.length) {
        list.push(effect);
        var newCarriages = [];
        for (var j = 0; j < ret.length; j++) {
          list.push(ret[j]);
          if (effect === "sv_damageEffect") {
            newCarriages.push(ret[j]);
          }
        }
        if (newCarriages.length) {
          newCarriages.push("sv_main");
          carriages = newCarriages;
        }
      }
    }
    for (var i = 0; i < mainBody.children.length; i++) {
      if (list.indexOf(mainBody.children[i].objectName) !== -1) {
        mainBody.children[i].visible = true;
      }
    }
    effectList = list;
    if (extra_data.data.sv_atk !== undefined) {
      numbers = [extra_data.data.sv_atk, extra_data.data.sv_def, extra_data.data.sv_food];
    }
  }

}

